Como implementar Bootstrap en un proyecto mediante CDN o mediante npm

Para implementar Bootstrap en un proyecto usando npm y angular lo unico que necesitamos es instalar el paquete de bootstrap con el siguiente comando:

npm i bootstrap

Una vez tenemos el paquete instalado tenemos que cargar el archivo CSS y el archivo JS en nuestro proyecto.

Tenemos que editar el archivo angular.json, la seccion de styles y scripts:

Tal como se muestra en la imagen tenemos que incluir el siguiente archivo para el CSS:

"./node_modules/bootstrap/dist/css/bootstrap.min.css"

Y el siguiente archivo para el JavaScript:

"./node_modules/bootstrap/dist/js/bootstrap.min.js"

Una vez tengamos hechos estos cambios ya podemos añadir componentes de bootstrap a nuestro proyecto

NOTA: Al buscar componentes en la página de bootstrap, asegurarse de que los componentes concuerden con la versión de bootstrap que nosotros tenemos, sino podrían funcionar de una manera incorrecta.

Hay algunos componentes que requieren de una versión del javascript distinta de la bootstrap.min.js, por ejemplo el componente Dropdown Button:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Para que este componente funcione correctamente tendremos que importar en el angular.json la siguiente librería en vez de la bootstrap.min.js:

"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

Para implementar Bootstrap usando el CDN simplemente tenemos que añadir las dos siguientes lineas en nuestro html:

En el head de nuestra página añadimos el siguiente código:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Y en el body añadimos la siguiente linea justo al final del todo:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Quedarían tal que así:

Si vamos a utilizar las clases para gestionar el tamaño responsive del navegador tenemos que asegurarnos de que tenemos la siguiente etiqueta en el head de nuestra página:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Web development | Bootstrap | CDN | NPM

Implementar Bootstrap